import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image, Input} from '@tarojs/components';
import {newHttp} from "../../../utils/request";
import {
  NEW_GET_ORDER_DETAIL,
  AIKUCUN_ORDER_AFTERSALEDETAIL,
  AIKUCUN_ORDER_UPLOADLOGISTICINFO
} from "../../../constants/api";
import {GetRequest} from "../../../utils/tools";
import Float from "../../../components/float/float";
import {http} from "../../../utils/http";
import './logistics.scss'

type StateProps = {
  orderInfo: object
  formData: any
}

export default class Refund extends Component {
  state: StateProps = {
    orderInfo: {},
    formData: {
      after_sale_form_id: '',
      logistic_no: '',
      logistic_name: ''
    },
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV == 'h5') {
      const root = document.querySelector('.taro-tabbar__panel')
      root.style.backgroundColor = '#f3f3f3'
      /*root.onscroll = debounce((page) => {
        this.setState({scrollTop: page[0].target.scrollTop})
      }, 10)*/
    }

    const { orderId, orderNum } = Taro.getCurrentInstance().router.params
    const {formData} = this.state;
    const orderInfo = await newHttp.catchGet(NEW_GET_ORDER_DETAIL, {orderId: orderNum})
    const refundInfo = await http.HPost(AIKUCUN_ORDER_AFTERSALEDETAIL, {order_num: orderNum})
    formData.after_sale_form_id = refundInfo.data.id
    this.setState({orderInfo: orderInfo, formData: formData})
  }

  setFormData(formData) {
    this.setState({
      formData
    });
  }

  async submitForm() {
    const {formData} = this.state;
    const { orderNum } = Taro.getCurrentInstance().router.params
    const res = await http.HPost(AIKUCUN_ORDER_UPLOADLOGISTICINFO, formData)
    if (res && res.message) {
      Taro.showToast({
        title: res.message,
        icon: 'none'
      })
    }
    if (res.data === '操作完成') {
      Taro.showToast({title: '操作成功'});
      const timer = setTimeout(() => {
        clearTimeout(timer);
        Taro.navigateTo({ url: '/main/order/aftersales/orderdetail?orderId=' + orderNum  })
      }, 1500);
    }
  }

  render() {
    const {
      orderInfo,
      formData,
    } = this.state
    if (!orderInfo) return
    return (
      <View className='after-sales-logistics'>
        <View className='goods'>
          <View className='goods-title'>退款商品</View>
          <View className='goods-info'>
            <Image
              src={orderInfo.default_img_url}
            ></Image>
            <View>
              <View className='goods-info-title'>{orderInfo.product_name}</View>
              <View className='goods-info-price'>
                <View>
                  <View className='price'><Text className='symbol'>￥</Text><View className='view-inline'><Float
                    value={orderInfo.total_fee}
                  /></View></View>
                </View>
                <View className='goods-info-num'>
                  x{orderInfo.buy_amount}
                </View>
              </View>
            </View>
          </View>
        </View>

        <View className='info'>
          <View className='info-title'>退款信息</View>
          <View className='info-item'>
            <View className='product-form-block-item'>
              <View className='product-form-block-item-left require1'>
                物流单号
              </View>
              <View className='value'>
                <Input
                  placeholder='请输入物流单号'
                  onInput={({detail: {value}}) => {
                    const {formData} = this.state;
                    formData.logistic_no = value;
                    this.setFormData(formData);
                  }}
                  value={formData.logistic_no}
                />
              </View>
            </View>
          </View>
          <View className='info-item'>
            <View className='product-form-block-item'>
              <View className='product-form-block-item-left require'>
                物流公司名称
              </View>
              <View className='value'>
                <Input
                  placeholder='请输入物流公司名称'
                  onInput={({detail: {value}}) => {
                    const {formData} = this.state;
                    formData.logistic_name = value;
                    this.setFormData(formData);
                  }}
                  value={formData.logistic_name}
                />
              </View>
            </View>
          </View>
        </View>

        <View className='footer'>
          <View className='btn-box-item' onClick={() => this.submitForm()}>
            提交信息
          </View>
        </View>
      </View>
    )
  }
}
